<template>
  <div class="rules outer">
    <div class="content">
      <div class="rules-banner">
        <button class="close" @click="popupSwitch"></button>
      </div>
      <ul>
        <li v-for="(v , i) in detailRules" :key="i">
          <a>{{i + 1}}</a><span>{{v}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {getDateNum} from '@/common/common'
  export default{
    name: 'rules',
    data () {
      return {
        detailRules: [
          '本活动适用于所有君弘注册用户（以下称“用户”）。',
          `本轮活动时间为 ${String.raw({raw: getDateNum()[0]}, '', '', '', '年', '', '月')}日至${String.raw({raw: getDateNum()[2]}, '', '', '', '年', '', '月')}日，为期${getDateNum()[1]}天。`,
          '活动期间，君弘注册用户每天通过“我的”-“签到”进行签到时，可获得君元宝或其他奖励，每位用户每日仅限签到一次。用户该月累计签到达到一定次数时，有机会获得对应的特殊奖励。',
          '签到奖品包括但不限于：君元宝、level-2行情卡券、话费、京东E卡等。话费及电商礼品卡奖励将于当月活动结束后7个工作日内完成发放。奖品总量有限，发完为止。',
          '用户在活动期间所得奖励可在“我的”-“我的钱包”中查看。',
          '若用户通过不正当手段参与本次活动，一经发现，即刻收回所有奖励并限制其参与活动资格。',
          '本活动最终解释权归国泰君安证券所有。'
        ]
      }
    },
    props: {
      popupSwitch: {
        type: Function
      }
    },
    methods: {
    },
    mounted () {
    }
  }
</script>
<style lang="less">
  .rules{
    height: auto;
    padding: 22px 0;
    .content{
      width: 325px;
      height: auto;
      background: white;
      border-radius: 11.5px;
      margin-top: -10px;
      .rules-banner{
        height: 59px;
        background: #e3f3ff url("../../../assets/images/title_rule.png") no-repeat center / 93.5px 23px;
        border-radius: 11.5px 11.5px 0 0;
      }
      ul{
        height: auto;
        padding: 18px 15px 24px 17px;
        text-align: justify;
        li{
          position: relative;
          margin-bottom: 10.5px;
          color: #666;
          font: 13px/1.3 PingFangSC-Medium;
          span{
            display: inline-block;
            text-indent: 18.5px;
          }
          a{
            position: absolute;
            top:0;
            left: 0;
            font-size: 10px;
            color: #FFFAE4;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 6px;
            width: 14px;
            height: 14px;
            background: url("../../../assets/images/num_bg.png") no-repeat left top / 100% 100%;
            border-radius: 7px;
          }
        }
      }
    }
  }
</style>
